<template>
    <div>
        <div class="topbg"></div>
        <div class="card">
            <div class="swiper-container">
                <swiper style="height:200px" :options="swiperOption" ref="mySwiper">
                    <!-- slides -->
                    <swiper-slide v-for="(item,index) in swiperImgs" :key="item.id">
                        <img :src="item.url" alt="" width="100%" height="100%">
                    </swiper-slide>
                    <!-- Optional controls -->
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
        </div>
        <div class="report">举报/屏蔽</div>
        <div class="detail">
            <h3>他来自</h3>
            <div class="address">滨江区，中控集团</div>
            <div class="icon">
                <div>
                    <div class="flex-center">
                        <van-icon name="pending-payment" size="30px"/>
                    </div>
                    <div class="title">战略规划专员</div>
                </div>
                <div>
                    <div class="flex-center">
                        <van-icon name="label-o" size="30px"/>
                    </div>
                    <div class="title">173cm</div>
                </div>
                <div>
                    <div class="flex-center">
                        <van-icon name="user-circle-o" size="30px"/>
                    </div>
                    <div class="title">25岁</div>
                </div>
                <div>
                    <div class="flex-center">
                        <van-icon name="balance-o" size="30px"/>
                    </div>
                    <div class="title">10-20w</div>
                </div>
            </div>
        </div>
        <div>
            <ul>
                <li class="group" style="border-radius:10px;box-shadow:0 0px 10px #dfdfdf">
                    <h3>个人认证</h3>
                    <div class="attset">
                        <van-tag style="margin:10px" plain size="large" type="success">微信认证</van-tag>
                        <van-tag style="margin:10px" plain size="large">房产认证</van-tag>
                        <van-tag style="margin:10px" plain size="large">车辆认证</van-tag>
                        <van-tag style="margin:10px" plain size="large" type="success">实名认证</van-tag>
                        <van-tag style="margin:10px" plain size="large">电话认证</van-tag>
                        <van-tag style="margin:10px" plain size="large" type="success">学历认证</van-tag>
                    </div>
                </li>
                <li class="group">
                    <h3>联系信息</h3>
                    <div style="padding-bottom:100px">
                        <div style="position:relative;height: 300px">
                            <img v-if="isAgree" src="https://dummyimage.com/600x400/red/img"
                                 style="width:100%;height:300px;position: absolute">
                            <h4 style="padding:6px 0">手机号：{{userInfo.tableUser.phone}}</h4>
                            <h4>微信号：{{userInfo.tableUser.wxMember}}</h4>
                        </div>
                        <van-button style="margin-top: 10px" size="large" plain type="info"
                                    @click="pay(userInfo.isAgree)">
                            {{userInfo.isAgree == '支付'? '点击查看联系信息':"暂时不知道"}}
                        </van-button>
                    </div>

                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    // import 'swiper/dist/css/swiper.css'
    import wx from 'weixin-jsapi'

    export default {
        data() {
            return {
                swiperOption: {
                    // some swiper options/callbacks
                    // 所有的参数同 swiper 官方 api 参数
                    // ...
                    direction: "horizontal", // 垂直切换选项
                    loop: true, // 循环模式选项
                    autoplay: {
                        delay: 1500 //1.5秒切换一次
                    },
                    // 如果需要分页器
                    pagination: {
                        el: ".swiper-pagination"
                    }
                },
                swiperImgs: [],
                userInfo: {tableUser: {phone: ""}, isAgree: "支付"},
                isAgree: true,//判断是否已经支付过
                // btnText:'点击查看联系信息'
            };
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },
        mounted() {
            // console.log("this is current swiper instance object", this.swiper);
            // this.swiper.slideTo(1, 1000, true);
        },
        created: function () {
            let openId = localStorage.getItem('openId')

            this.$http
                .get("/app/login/autoLogin?openId=" + openId).then(//先登录
                this.$http
                    .get("/app/my/getUserInfo?userId=" + this.$route.query.userId)//获取用户信息列表
                    .then(res => {
                        console.log(res);
                        this.userInfo = res.data;
                        //判断用户是否上传有图片 如果有就轮播 否则轮播加载 微信头像
                        if (res.data.listImage.length != 0) this.swiperImgs = res.data.listImage;
                        else this.swiperImgs.push({
                            id: 1,
                            url: "http://thirdwx.qlogo.cn/mmopen/vi_32/MSvp05X6xm2oFzgpzlhxiav73Sq7TicGa7iaDiaXyKAuUkicib4WlypGe8ttDic9H37foVjVIXTIJfOvy1Je3VSPdAXNQ/132"
                        });
                        this.isShowInfo(res.data.isAgree)

                    })
            );

        },
        methods: {
            isShowInfo(isAgree) {
                console.log(isAgree)
                if (isAgree === "同意") {
                    this.isAgree = false;
                }
            },
            async pay(kind) {

                if (kind === '支付' || "拒绝") {
                    console.log("i need pay");
                    let res = await this.getOrder();

                    console.log(res)
                    //企业微信中调用需要配置
                    // wx.config({
                    //     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    //     appId: res.appId, // 必填，公众号的唯一标识
                    //     timestamp: res.timeStamp, // 必填，生成签名的时间戳
                    //     nonceStr: res.nonceStr, // 必填，生成签名的随机串
                    //     signature: res.paySign,// 必填，签名，见附录1
                    //     jsApiList: ['chooseWXPay']
                    // })
                    // 支付
                    // wx.ready(function() {
                    //     console.log("开始支付")
                    //     wx.chooseWXPay({
                    //         timestamp: res.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    //         nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
                    //         package: res.packageStr, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                    //         signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    //         paySign: res.paySign, // 支付签名
                    //         success: function (res) {
                    //             // 这里写成功后的动作
                    //             // 我试过跳转路由好像不灵
                    //             // 或者是执行太快后端处理订单未变化呢
                    //             // 我改成了这个
                    //             // window.location.href = "你所要跳转的页面";
                    //             alert("支付成了")
                    //         },
                    //         cancel: function (res) {
                    //             alert('已取消支付');
                    //         },
                    //         fail: function (res) {
                    //             alert('购买失败，请重新创建订单')
                    //         }
                    //     })
                    // })

                    //////////////////////////////////////////////////////////////////////////////////
                    function onBridgeReady() {
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId": res.appId,     //公众号名称，由商户传入
                                "timeStamp": res.timeStamp,         //时间戳，自1970年以来的秒数
                                "nonceStr": res.nonceStr, //随机串
                                "package": res.packageStr,
                                "signType": "MD5",         //微信签名方式：
                                "paySign": res.paySign //微信签名
                            },
                            function (res) {
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    // 使用以上方式判断前端返回,微信团队郑重提示：
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    console.log(JSON.stringify(res))
                                }
                            });
                    }

                    if (typeof WeixinJSBridge == "undefined") {
                        if (document.addEventListener) {
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        } else if (document.attachEvent) {
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    } else {
                        onBridgeReady();
                    }


                } else {
                    return false
                }
            },
            getOrder() {
                let uId = this.userInfo.tableUser.id;

                // async function a() {
                //     let res = await  this.$http.post('/app/pay/insertOrder',{ "replayUserId": uId})
                //
                //     res.push()

                // }

                return this.$http.post('/app/pay/insertOrder', {"replayUserId": uId}).then(
                    res => {
                        console.log(res)
                        return res.data
                    }
                )
            }
        },
    };
</script>

<style scoped>
    .attset {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .topbg {
        background: #000000;
        height: 150px;
    }

    .card {
        box-sizing: border-box;
        width: 94%;
        height: 250px;
        position: absolute;
        top: 4px;
        left: 3%;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 0 10px #ccc;
        padding: 20px;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
    }

    .report {
        margin-top: 104px;
        display: flex;
        justify-content: flex-end;
        padding: 4px 20px;
        font-size: 12px;
        color: gray;
    }

    .detail {
        padding: 10px 20px;
    }

    .detail .address {
        padding: 6px 0;
        font-size: 14px;
        color: #333333;
    }

    .flex-center {
        display: flex;
        justify-content: center;
    }

    .detail .icon {
        display: flex;
        justify-content: space-around;
        padding: 20px 0;
    }

    .detail .icon .title {
        font-size: 12px;
        padding: 10px 0;
    }

    .group {
        padding: 20px 10px;
        border-bottom: 1px solid #f2f2f2;
    }

    .group p {
        font-size: 12px;
        font-weight: 300;
        padding: 6px 0;
        text-align: center;
    }

    .group > div {
        padding: 30px 0;
    }

    .group .listBtn {
        display: block;
        font-size: 12px;
        padding: 6px 16px;
        outline: none;
        background: #ffffff;
        border: 1px solid #000000;
        border-radius: 20px;
        margin: 0 auto;
    }
</style>
